<script setup>
import { ref } from 'vue'

import elems from '../../data/LanguageElementData.json'
import weaponElems from '../../data/LanguageWeaponElementData.json'
import attrNames from '../../data/attrs.json'
import { store } from '../../store/store.js'

const props = defineProps(['vulnElem', 'vulnWeaponElem', 'growing', 'constant', 'classExtra'])
const vulnElems = props.vulnElem.split(',')
const vulnWeaponElems = getWeaponElems(props.vulnWeaponElem)

const coeffs = ref([])
for (let i = 61; --i;) {
  coeffs.value.unshift(store.properties.get(100000 + i)[2])
}
const lv = ref(60)
const pname = ['未心智增域', '20 \u2192 30', '30 \u2192 40', '40 \u2192 50', '50 \u2192 60']
const plv = [1, 20, 30, 40, 50, 60]
const potential = ref(4)

function getWeaponElems(vulnCode) {
  const vulns = []
  for (const key of Object.keys(weaponElems)) {
    if (vulnCode & key) {
      vulns.push(key)
    }
  }
  return vulns
}
</script>

<template>
  <section class="attr">
    <h2>属性</h2>
    <label for="lv">等级</label> <input id="lv" type="number" min="0" max="60" v-model.number="lv">
    <fieldset>
      <legend>心智增域</legend>
      <div v-for="n in 5">
        <input type="radio" :id="'p'+(n-1)" :value="n-1" v-model="potential" :disabled="lv < plv[n-1] || lv > plv[n]">
        <label :for="'p'+(n-1)">{{ pname[n-1] }}</label>
      </div>
    </fieldset>
    <table>
      <caption>人形属性</caption>
      <thead>
      <tr>
        <td>弱点</td>
        <td class="vulns">
          <span v-for="vul of vulnWeaponElems" :class="['weapon-elem', 'weapon-elem-'+vul]">{{ weaponElems[vul] }}</span>
          <span v-for="vul of vulnElems" :class="['elem', 'elem-'+vul]">{{ elems[vul] }}</span>
        </td>
      </tr>
        <tr>
          <th>属性</th>
          <th>数值</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(value, key) in growing">
          <td :class="'attr-' + key">{{ attrNames[key] }}</td>
          <td>{{ Math.ceil(value*coeffs[lv-1]/1000) + classExtra[potential][key] }}</td>
        </tr>
        <tr v-for="(value, key) in constant">
          <td :class="'attr-' + key">{{ attrNames[key] }}</td>
          <td>{{ key > 8 ? value/10 + '%' : value }}</td>
        </tr>
      </tbody>
    </table>
  </section>
</template>

<style scoped>
.attr {
  grid-area: at;
}
table,
caption {
  background: #556167;
  box-shadow: 0 2px 4px #556167;
  color: white;
  text-align: center;
  width: 100%;
}
table {
  border-radius: 0 0 0.25em 0.25em;
}
caption {
  border-radius: 0.25em 0.25em 0 0;
}
th {
  font-weight: bold;
}
fieldset div {
  display: inline-block;
  margin-right: 0.5em;
}
fieldset input {
  margin-right: 0.25em;
}
.vulns {
  column-gap: 0.5em;
  display: flex;
  justify-content: center;
}
</style>
